<template>
  <div class="video-screen">
    <div class="container cruise-video">
      <div class="label">{{ data }}</div>
      <div class="canvas-box">
        <canvas class="canvas" :id="'canvas' + index"></canvas>
      </div>

      <div class="btn-wrap">
        <div class="stop-btn" @click.stop="stopFn()">
          <img :src="videoIcon.stop" alt="停止" />
        </div>
        <div class="fullScreen-btn" @click.stop="fullScreen()">
          <img :src="videoIcon.fullScreen" alt="全屏" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import bus from "@/utils/bus";
import { getData, postData } from "@/request/http";

export default {
  name: "",
  props: {
    url: {
      type: String,
      default: ""
    },
    sn: {
      type: String,
      default: ""
    },
    index: {
      type: Number,
      default: 0
    },
    activeIndex: {
      type: Number,
      default: 0
    },
    //传来的name即lable
    data: {
      type: String,
      default: ""
    },
    item: {
      type: Object,
      default() {
        return {
          status: true,
          label: "",
          sn: ""
        };
      }
    }
  },
  data() {
    return {
      video: null,
      videoUrl:
        "http://192.168.1.29:49000/YDT-ONVIF-251227033907363-5L07732PAJD21AA/0/0",
      videoData: {},
      videoIcon: {
        stop: require("@/assets/img/video-stop2.png"),
        fullScreen: require("@/assets/img/full_cameraPlay.png")
      },
      url_new: "",

      player: null,
      options: {},
      videoHeight: 0,
      videoWidth: 0,
      canvasDom: null
    };
  },
  computed: {
    flag() {
      return this.$store.state.cameraPlay.flag;
    }
  },
  created() {},
  mounted() {
    if (this.player !== null) {
      this.player.stop();
      this.player = null;
    }
    this.initPlay();
    if (this.videoUrl == "" && this.sn != "") {
      this.getUrl(this.sn);
    }

    //接收全部停止
    bus.$on("allStop", _new => {
      // console.log(_new);
      this.player.stop();
      for (var i = 0; i < _new.length; i++) {
        _new[i].status = false;
      }
    });
  },
  methods: {
    initPlay() {
      const $canvas = document.getElementById("canvas" + this.index);
      this.canvasDom = $canvas;
      const defautVideoUrl = this.videoUrl;
      var box = document.getElementsByClassName("canvas-box")[0];
      let videoWidth = box.clientWidth || box.offsetWidth;
      let videoHeight = box.clientHeight || box.offsetHeight;
      //   let videoHeight = "100%";
      //   let videoWidth = "100%";
      this.options = {
        url: this.videoUrl,
        $container: $canvas,
        hasVideo: true,
        hasAudio: false,
        volume: 1.0,
        muted: false,
        autoplay: true,
        loop: false,
        isLive: true,
        chunkSize: 128 * 1024,
        preloadTime: parseInt(500),
        bufferingTime: parseInt(300),
        cacheSegmentCount: 64,
        customLoader: null
      };
     // console.log(this.options);

      let isH265 = true;
      WXInlinePlayer.init({
        // asmUrl: "./prod." + (isH265 ? "h265" : "all") + ".asm.combine.js",
        // wasmUrl: "./prod." + (isH265 ? "h265" : "all") + ".wasm.combine.js"
        asmUrl: "./prod.all" + ".asm.combine.js",
        wasmUrl: "./prod.all" + ".wasm.combine.js"
      });
      WXInlinePlayer.ready().then(() => {
        let player = new WXInlinePlayer(this.options);
        this.player = player;
        player.play();
        player.on("loadError", e => {
        //  console.log("loadError", e);
        });
        player.on("loadSuccess", () => {
        //  console.log("loadSuccess");
        });
        player.on("mediaInfo", mediaInfo => {
        //  console.log("mediaInfo", mediaInfo);
          const { onMetaData } = mediaInfo;
          //注意：这里是指定绘制的真实分辨率。若要让canvas拉伸填满指定的高宽，则由css的style.width和style.height决定。
          this.canvasDom.height = onMetaData.height || videoHeight;
          this.canvasDom.width = onMetaData.width || videoWidth;
          for (let i = 0; i < onMetaData.length; i++) {
            if ("height" in onMetaData[i]) {
              this.canvasDom.height = onMetaData[i].height;
            } else if ("width" in onMetaData[i]) {
              this.canvasDom.width = onMetaData[i].width;
            }
          }
        });
      });
    },

    fnStop() {
      this.player.stop();
    },
    //当再次点击开始按钮的时候，重新申请票据，获取url
    getUrl(sn) {
      if (!sn) {
        return;
      }

      //this.url_new = "http://flv.bdplay.nodemedia.cn/live/bbb.flv";

      return new Promise((resolve, reject) => {
        postData("/adminweb/device/stream/live/url/ticket/once", {
          sn: sn,
          ptl: "HTTP-FLV",
          channel: 0,
          sub: 0
        })
          .then(res => {
            this.url_new = res.datas.stream;
            resolve(res);
          })
          .catch(res => {
            reject("error");
            this.$message.error("error");
          });
      });
    },
    //单个停止
    stopFn() {
      this.player.stop();
      this.item["status"] = false;
      bus.$emit("hideControl", this.item);
    },
    fullScreen() {
      this.canvasDom.requestFullscreen();
    }
  },
  watch: {
    data: {
      handler(_new) {
        this.videoData = _new;
       // console.log(_new);
      },
      deep: true
    }
  },
  beforeDestory() {
    this.player.stop();
  }
};
</script>
<style scoped>
.video-screen {
  width: 100%;
  height: 100%;
  z-index: 999;
}
.container {
  width: 100%;
  height: 100%;
  position: relative;
}
.label {
  position: absolute;
  right: left;
  top: 0;
  background-color: rgba(0, 0, 0, 0.2);
  width: auto;
  height: 35px;
  line-height: 35px;
  padding: 0 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 15px;
  border-radius: 10px;
  z-index: 999;
}
.btn-wrap {
  position: absolute;
  bottom: 2px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
}
/* .play-btn {
  cursor: pointer;
}
.play-btn img {
  width: 80%;
  height: 80%;
} */
.stop-btn {
  cursor: pointer;
}
.stop-btn img {
  width: 80%;
  height: 80%;
}
.fullScreen-btn {
  cursor: pointer;
  margin-left: 20px;
  /* position: absolute;
  right: 0;
  bottom: 0; */
}
.fullScreen-btn img {
  width: 70%;
  height: 70%;
}

.canvas-box {
  width: 100%;
  height: 100%;
}
.canvas {
  width: 100%;
  height: 100%;
}
</style>
